<template>
	<view class="body">
		<view class="vehicleType">
			<text class="title">车辆类型</text>
			<view class="input_box">
				<u-input v-model="cxInfo.cx" custom-style='style'   :type="type" disabled="false" @click="open1" input-align="right"/>
				<u-icon name="arrow-right" color="#c8c7cc" size="28" @click="open1"></u-icon>
			</view>
			<u-picker mode="selector" style="color: #c8c7cc" v-model="show1" :default-selector="[0]" :range="list" @confirm="confirm1">
			</u-picker>
		</view>
		<view class="vehicleType">
			<text class="title">注册日期</text>
			<view class="input_box">
				<u-input v-model="cxInfo.zcTime" id="input-title"  :type="type" :border="border" disabled="false" @click="open2"  input-align="right"/>
				<u-icon name="arrow-right" color="#c8c7cc" size="28" @click="open2"></u-icon>
			</view>
		
			<u-picker mode="time" style="color: #c8c7cc" v-model="show2" :start-year="startYear" :end-year="endYear" :params="params"
				@confirm="confirm2"></u-picker>
		</view>
		<view class="vehicleType">
			<text class="title">事故情况</text>
			<view class="input_box">
				<u-input v-model="cxInfo.accident"  :type="type" :border="border" disabled="false" @click="open3" input-align="right"/>
				<u-icon name="arrow-right" color="#c8c7cc" size="28" @click="open3"></u-icon>
			</view>
			
			<u-picker mode="selector" style="color: #c8c7cc" v-model="show3" :default-selector="[0]" :range="list2" @confirm="confirm3">
			</u-picker>
		</view>
		<view class="wenxintishi">
			<text class="title" style="color: #002A58;font-size: 36rpx;font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;">温馨提示:</text>
			<view class="tishi">
				<text class="one">
					一、您的爱车应在有效的检验有效期内。
				</text>
				<text class="one">
					二、如果出厂超过四年未办理登记的，不属于六年内免检范围。
				</text>
			</view>
		</view>
		
		<u-button type="primary" id="btn" @click="handlerClick">计算</u-button>
		<u-card head-style="headstyle" title="计算结果:" title-size="36" title-color="#002A58" v-if='result' id="cardTitle">
			<view class="" slot="body">
				<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
					<view class="">
						{{result1}}
						<text style="color: #f26767;">{{time}}</text>
						{{result2}}
					</view>
				</view>
				<view class="bottom" slot="foot">
					<u-icon name="error-circle" color="#000000" size="28" class="icon"></u-icon>
					<text class="bottom_title" style="color: #000000;">
						本计算结果仅供参考
					</text>
				</view>
			</view>
		</u-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show1: false,
				show2: false,
				show3: false,
				result: false,
				list: [
					'营运客车',
					'货车、大中型客车',
					'9座（含）以下非营运小微型载客汽车（面包车除外）',
					'面包车',
					'非营运大型轿车',
					'摩托车',
					'其他机动车'
				],
				list2: [
					'未发生过致人伤害事故',
					'发生过致人伤害事故'
				],
				cxInfo: {
					cx: '请选择',
					zcTime: '请选择',
					accident: '请选择'
				},
				params: {
					year: true,
					month: true,
					day: true,
				},
				startYear: '1949',
				endYear: '',
				result1: '', //本轮检验周期内，请于
				result2: '', //前三个月内至检验机构参加安全技术检验。
				time: ''
			}
		},
		methods: {
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			open1() {
				this.show1 = true
			},
			open2() {
				this.show2 = true
			},
			open3() {
				this.show3 = true
			},
			confirm1(e) {
				this.cxInfo.cx = this.list[e]
			},
			confirm2(e) {
				this.cxInfo.zcTime = e.year + '-' + e.month + '-' + e.day
			},
			initDate() {
				this.endYear = new Date().getFullYear()
			},
			confirm3(e) {
				this.cxInfo.accident = this.list2[e]
			},
			handlerClick() {
				let year = new Date().getFullYear()
				let zcYear = this.cxInfo.zcTime.substring(0, 4)
				let subResult = year - zcYear
				let monthResult = this.cxInfo.zcTime.substring(5, 7)
				console.log(monthResult)
				let computeResult = this.cxInfo.zcTime.substring(5, 10)
				let dayResult = this.cxInfo.zcTime.substring(8, 10)
				console.log(dayResult)
				if (this.cxInfo.cx == '请选择') {
					uni.showToast({
						title: '请选择车辆类型',
						icon: 'none'
					})
					return false
				}
				if (this.cxInfo.zcTime == '请选择') {
					uni.showToast({
						title: '请选择注册时间',
						icon: 'none'
					})
					return false
				}
				if (this.cxInfo.accident == '请选择') {
					uni.showToast({
						title: '请选择事故情况',
						icon: 'none'
					})
					return false
				}
				this.result = true


				if (this.cxInfo.cx == '营运客车' && '货车、大中型客车' && '9座（含）以下非营运小微型载客汽车（面包车除外）' && '面包车' && '其他机动车') {
					this.result1 = '本轮检验周期内，请于'
					this.result2 = '前三个月内至检验机构参加安全技术检验'
				}
				if (this.cxInfo.cx == '非营运大型轿车' && '摩托车') {
					if (this.cxInfo.accident == '未发生过致人伤害事故') {
						this.result1 = '您的爱车属于6年内免检车辆。本轮检验周期内，请于前'
						this.result2 = '三个月内通过交管12123为爱车申领检验标志。'
					} else {
						this.result1 = '本轮检验周期内，请于'
						this.result2 = '前三个月内至检验机构参加安全技术检验'
					}
				}

				if (this.cxInfo.cx == '9座（含）以下非营运小微型载客汽车（面包车除外）') {
					if (0 < subResult < 6) {
						this.result1 = '本轮检验周期内，请于'
						this.result2 = '前三个月内至检验机构参加安全技术检验'
						this.time = zcYear * 1 + subResult + '-' + computeResult
					} else if (6 >= subResult < 10) {
						this.result1 = '本轮检验周期内，请于'
						this.result2 = '前三个月内至检验机构参加安全技术检验'
						this.time = zcYear * 1 + subResult + '-' + computeResult
					} else if (10 <= subResult < 15) {
						if (this.cxInfo.accident == '未发生过致人伤害事故') {
							this.result1 = '您的爱车属于6年内免检车辆。本轮检验周期内，请于前'
							this.result2 = '三个月内通过交管12123为爱车申领检验标志。'
							this.time = zcYear * 1 + subResult + '-' + computeResult
						} else {
							this.result1 = '本轮检验周期内，请于'
							this.result2 = '前三个月内至检验机构参加安全技术检验'
							this.time = zcYear * 1 + subResult + '-' + computeResult
						}
					}
				} else if (this.cxInfo.cx == '其他机动车') {
					if (subResult < 5) {
						this.result1 = '本轮检验周期内，请于'
						this.result2 = '前三个月内至检验机构参加安全技术检验'
						this.time = zcYear * 1 + 1 + subResult + '-' + computeResult
					}
				} else if (this.cxInfo.cx == '营运客车') {
					if (subResult < 5) {
						this.result1 = '本轮检验周期内，请于'
						this.result2 = '前三个月内至检验机构参加安全技术检验'
						this.time = zcYear * 1 + 1 + subResult + '-' + computeResult
					}
				} else if (this.cxInfo.cx == '面包车') {
					if (0 < subResult < 6) {
						this.result1 = '本轮检验周期内，请于'
						this.result2 = '前三个月内至检验机构参加安全技术检验'
						this.time = zcYear * 1 + subResult + '-' + computeResult
					}
				} else if (this.cxInfo.cx == '摩托车') {
					if (0 < subResult < 4 && this.cxInfo.accident == '未发生过致人伤害事故') {
						this.result1 = '您的爱车属于6年内免检车辆。本轮检验周期内，请于前'
						this.result2 = '三个月内通过交管12123为爱车申领检验标志。'
						this.time = zcYear * 1 + subResult + '-' + computeResult
					} else if (subResult > 4 && this.cxInfo.accident == '未发生过致人伤害事故') {
						this.result1 = '您的爱车属于6年内免检车辆。本轮检验周期内，请于前'
						this.result2 = '三个月内通过交管12123为爱车申领检验标志。'
						this.time = zcYear * 1 + 1 + subResult + '-' + computeResult
					} else if (0 < subResult < 4 && this.cxInfo.accident == '发生过致人伤害事故') {
						this.result1 = '本轮检验周期内，请于'
						this.result2 = '前三个月内至检验机构参加安全技术检验'
						this.time = zcYear * 1 + subResult + '-' + monthResult + '-' + '30日'
					} else if (subResult > 4 && this.cxInfo.accident == '发生过致人伤害事故') {
						this.result1 = '本轮检验周期内，请于'
						this.result2 = '前三个月内至检验机构参加安全技术检验'
						this.time = zcYear * 1 + 1 + subResult + '-' + monthResult + '-' + '30日'
					}
				} else if (this.cxInfo.cx == '非营运大型轿车') {
					if (this.cxInfo.accident == '发生过致人伤害事故') {
						this.result1 = '本轮检验周期内，请于'
						this.result2 = '前三个月内至检验机构参加安全技术检验'
						this.time = zcYear * 1 + 1 + subResult + '-' + monthResult + '-' + '30日'
					}
					if (this.cxInfo.accident == '未发生过致人伤害事故') {
						if (0 < subResult < 6) {
							console.log('111')
							this.result1 = '您的爱车属于6年内免检车辆。本轮检验周期内，请于前'
							this.result2 = '三个月内通过交管12123为爱车申领检验标志。'
							this.time = zcYear * 1 + subResult + '-' + computeResult
						}
						if (6 < subResult < 10) {
							console.log('222')
							this.result1 = '本轮检验周期内，请于'
							this.result2 = '前三个月内至检验机构参加安全技术检验'
							this.time = zcYear * 1 + subResult + '-' + computeResult
						}
						if (subResult > 15) {
							this.result1 = '本轮检验周期内，请于'
							this.result2 = '前三个月内至检验机构参加安全技术检验'
							this.time = zcYear * 1 + 1 + subResult + '-' + monthResult + '-' + '30日'
						}
					}
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.body {
		padding: 20rpx;
	}

	.img {
		width: 600rpx;
		height: 120rpx;
		margin: 0 auto;
	}

	.img image {
		width: 100%;
		height: 100%;
	}

	.vehicleType {
		width: 600rpx;
		height: auto;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #c8c7cc;
	}

	.title {
		font-weight: bold;
		font-size: 28rpx;
		color: #002A58;
	}

	.wenxintishi {
		width: 600rpx;
		padding: 20rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 0 auto;
		border-bottom: 2rpx solid #c8c7cc;
	}

	.tishi {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	.one{
		font-size: 24rpx;
		color: rgba(0,0,0,0.6);
	}

	#btn {
		background-color: #002A58;
		color: #FFFFFF;
		width: 600rpx;
		margin-top: 40rpx;
	}

	.bottom {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 30rpx;
		background-color: #ffc94b;
		height: auto;
		border-radius: 14rpx;
		padding: 20rpx;
	}

	.bottom image {
		width: 140rpx;
		height: 140rpx;
	}

	.bottom_title {
		font-size: 30rpx;
	}
	.input_box{
		display: flex;
		justify-content: space-between;
		margin-right: -162rpx;
	}
	#input-title{
		color: #c8c7cc;
	}
	.icon{
		margin-right: 18rpx;
	}
	#cardTitle{
		font-weight: bold;
		font-size: 36rpx;
	}
</style>
